import {
  Table,
  Tag,
  Space,
  Input,
  Form,
  Button,
  Modal,
  message,
  Radio,
} from 'antd';
import React, { useState } from 'react';
import request from 'umi-request';

function Admin() {
  const [value, setValue] = React.useState(1);
  const [account, setAccount] = useState({});

  const columns = [
    {
      title: 'id',
      dataIndex: 'a_id',
      key: 'a_id',
    },
    {
      title: '姓名',
      dataIndex: 'user_name',
      key: 'user_name',
    },
    {
      title: '身份证号码',
      dataIndex: 'id_number',
      key: 'id_number',
    },
    {
      title: '电话号码',
      dataIndex: 'u_tel',
      key: 'u_tel',
    },
    {
      title: '账户余额',
      key: 'balance',
      dataIndex: 'balance',
    },
    {
      title: '用户状态',
      key: 'state',
      dataIndex: 'state',
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      render: (text, record) => (
        <Button type="link" onClick={() => showModal(record)}>
          修改
        </Button>
      ),
    },
  ];

  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = (value) => {
    setIsModalVisible(true);
    setAccount(value);
  };

  const handleOk = () => {
    console.log(account);
    request
      .post('http://123.60.20.244:8080/atm/admin/updateAccountState', {
        params: {
          state: value,
          user_name: account.user_name,
        },
      })
      .then((response) => {
        if (response.code === 0) {
          getData();
          message.success({
            content: response.message,
            key: 'global_key',
            duration: 2,
          });
        } else {
          message.success({
            content: response.message,
            key: 'global_key',
            duration: 2,
          });
        }
      });
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const paginationProps = {
    // showQuickJumper: true,
    showTotal: (totals) => `共 ${totals} 条`,
    // current: pageOption.pageNo,
    pageSize: 3,
    // onChange: (current, size) => paginationChange(current, size)
  };

  const onChange = (e) => {
    console.log(e);
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  let [data, setDate] = useState([]);

  const getData = () => {
    request
      .get('http://123.60.20.244:8080/atm/admin/getAllAccount')
      .then((response) => {
        console.log(response);
        data = setDate(response);
      })
      .catch((e) => console.log('fail:', e));
  };

  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <div>
      <button onClick={getData}>获取数据</button>
      <div>0:未审核，1:正常状态，2:被冻结</div>
      {/*<Form onFinish={onFinish}>*/}
      {/*  <Form.Item*/}
      {/*    name="user_name"*/}
      {/*    label="用户名">*/}
      {/*    <Input style={{ width: 100 }}/>*/}
      {/*  </Form.Item>*/}
      {/*  <Button htmlType="submit" type="inline">确定</Button>*/}
      {/*</Form>*/}
      <Table
        columns={columns}
        dataSource={data}
        scroll={{ y: 240 }}
        pagination={paginationProps}
      />
      <Modal
        title="修改用户状态"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Radio.Group onChange={onChange} value={value}>
          <Radio value={1}>正常</Radio>
          <Radio value={2}>冻结</Radio>
        </Radio.Group>
      </Modal>
    </div>
  );
}

export default Admin;
